<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>职业经历</title>
	<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<!--标准mui.css-->
	<link rel="stylesheet" href="../css/mui.min.css">
	<link rel="stylesheet" href="../css/mui.picker.css" />
	<link rel="stylesheet" type="text/css" href="../css/mui.picker.min.css" />
	<link rel="stylesheet" href="../css/mui.poppicker.css" />
	<link rel="stylesheet" href="../css/common.css" />
	<style>
		.mui-input-group .mui-input-row {
			height: 55px;
		}
		.mui-input-row label {
			padding: 0 15px;
			line-height: 55px;
		}
		.mui-input-row label~input {
			margin-top: 7px;
		}
		.mui-input-row label~input::-webkit-input-placeholder {
			color: #999;
		}
		.mui-input-row label,label~input {
			font-family: 'PingFangSC-Regular';
		    font-size: 14px;
		    color: #666666;
		}
		.down-select {
			float: right;
			width: 65%;
			font-family: 'PingFangSC-Regular';
		    font-size: 14px;
		    color: #666666;
		    line-height: 55px;
		}
		.down-select label {
			width: 80%;
			padding: 0;
			color: #333;
		}
		.down-select img {
			float: right;
			margin-top: 10px;
			margin-right: 18px;
			width: 28px;
		    height: 28px;
		    vertical-align: middle;
		}
		.mui-input-row .label-title {
			width: 100%;
			background: #FAFAFA;
			text-align: center;
			font-size: 16px;
			color: #333333;
		}
		.companyId-div {
			display: none;
		}
	</style>
</head>
<body>
	<header class="mui-bar mui-bar-nav">
		<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		<h1 class="mui-title">职业经历</h1>
	</header>
	<div class="mui-content">
		<form class="mui-input-group" style="padding-bottom: 10px;">
			<div class="mui-input-row">
				<label>职业状态</label>
				<div id="showProfession" class="down-select">
					<label id="prodessionResult"></label>
					<img src="../img/detail/down_color_icon.png" />
				</div>
			</div>
			<div style="display: none;" id="otherProfessionRow" class="mui-input-row">
				<label style="line-height: 25px;">是否有其他工作经历</label>
				<div id="showOtherProfession" class="down-select">
					<label id="otherProfessionResult"></label>
					<img src="../img/detail/down_color_icon.png" />
				</div>
			</div>
			<div class="mui-input-row">
				<label>月收入（元）</label>
				<input id="income" type="text" placeholder="若无填“0”" >
			</div>
			<div id="addProfessionRow" style="display: none;" class="mui-input-row">
				<label>职业经历</label>
				<input style="float: left; width: 50%;" type="text" placeholder="注：可添加多个职业经历" readonly="readonly"></input>
				<button id="addCard" style="float: right;margin: 12px 0px 0 0;padding: 10px 0px;color: #FF4747;" type="button" class="mui-btn mui-btn-link">+新增</button>
			</div>
			<div id="professionCard" style="display: none; margin-bottom: 50px;">
				<!--<div class="mui-card" style="padding-bottom: 10px;">
					<ul class="mui-table-view">
						<div class="mui-input-row">
							<label class="label-title">职业经历1</label>
						</div>
						<div class="mui-input-row">
							<label>单位名称</label>
							<input type="text" placeholder="请填写单位名称" >
						</div>
						<div class="mui-input-row">
							<label>职位名称</label>
							<input type="text" placeholder="请填写职位名称" >
						</div>
						<div class="mui-input-row">
							<label>单位国家</label>
							<input type="text" placeholder="" value="中国" >
						</div>
						<div class="mui-input-row">
							<label>单位地址</label>
							<div class="down-select showCityPicker">
								<label class="cityResult">省 市 区</label>
								<img src="../img/detail/down_color_icon.png" />
							</div>
						</div>
						<div class="mui-input-row">
							<label></label>
							<input type="text" placeholder="详细地址（精确到门牌号）" value="" >
						</div>
						<div class="mui-input-row">
							<label>单位电话</label>
							<input type="text" placeholder="请填写单位电话" value="" >
						</div>
						<div class="mui-input-row">
							<label>入职时间</label>
							<div data-options='{"type":"date"}' class="down-select showDatePicker">
								<label class="dateResult"></label>
								<img src="../img/detail/down_color_icon.png" />
							</div>
						</div>
						<div class="mui-input-row">
							<label>离职时间</label>
							<div data-options='{"type":"date"}' class="down-select showDatePicker">
								<label class="dateResult departureTime">至今则不填</label>
								<img src="../img/detail/down_color_icon.png" />
							</div>
						</div>
					</ul>
				</div>-->
			</div>
			<div id="school" style="display: none;">
				<div class="mui-input-row">
					<label>教育程度</label>
					<div id="showEducation" class="down-select">
						<label id="educationResult"></label>
						<img src="../img/detail/down_color_icon.png" />
					</div>
				</div>
				<div class="mui-input-row">
					<label>学校名称</label>
					<input type="text" id="schoolName" placeholder="请填写学校名称" value="" >
				</div>
				<div id="major" style="display: none;" class="mui-input-row">
					<label>专业名称</label>
					<input type="text" id="professional" placeholder="请填写专业名称" value="" >
				</div>
				<div class="mui-input-row">
					<label>学校所在国家</label>
					<input type="text" id="schoolCountry" placeholder="" value="中国" >
				</div>
				<div id="addrChoose" class="mui-input-row">
					<label>学校地址</label>
					<div class="down-select showCityPicker">
						<label id="schoolAddr" class="cityResult">省 市 区</label>
						<img src="../img/detail/down_color_icon.png" />
					</div>
				</div>
				<div class="mui-input-row">
					<label></label>
					<input type="text" id="schoolDetailed" placeholder="详细地址（精确到门牌号）" value="" >
				</div>
				<div class="mui-input-row">
					<label>入学时间</label>
					<div data-options='{"type":"date","beginYear":1900}' class="down-select showDatePicker">
						<label id="educationStartTime" class="dateResult"></label>
						<img src="../img/detail/down_color_icon.png" />
					</div>
				</div>
			</div>
		</form>
		<div class="transaction-container"><button type="button">保存</button></div>
	</div>
	<script type="text/javascript" src="../js/thirdparty/jquery-3.3.1.js" ></script>
	<script type="text/javascript" src="../js/thirdparty/mui.min.js" ></script>
	<script type="text/javascript" src="../js/thirdparty/mui.picker.js"></script>
	<script type="text/javascript" src="../js/thirdparty/mui.picker.min.js"></script>
	<script type="text/javascript" src="../js/thirdparty/mui.poppicker.js"></script>
	<script src="../js/thirdparty/city.data.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/thirdparty/city.data-3.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript" src="../js/utils/regular.js" ></script>
	<script type="text/javascript" src="../js/thirdparty/spin.min.js" ></script>
	<script type="text/javascript" src="../js/utils/boot.js" ></script>
	<script type="text/javascript">
		var customerId = base.getParameter("customerId");
		var applyCustomerId = base.getParameter("applyCustomerId");
		var companyOtherId = null;
		(function($, doc) {
			$.init();
			getCompanyListListData();
			//在职经历
			var userPicker = new $.PopPicker();
			userPicker.setData([{
				value: '1',
				text: '在职'
			}, {
				value: '2',
				text: '无业'
			}, {
				value: '3',
				text: '学生'
			}, {
				value: '4',
				text: '退休'
			}, {
				value: '5',
				text: '学龄前儿童'
			}]);
			var showProfessionButton = doc.getElementById('showProfession');
			var prodessionResult = doc.getElementById('prodessionResult');
			showProfessionButton.addEventListener('tap', function(event) {
				userPicker.show(function(items) {
					prodessionResult.innerText = _getParam(items[0], "text");
					if (_getParam(items[0], "value") == 1) {
						onJob();//在职
						if(jQuery("#professionCard").find(".mui-card").length==0) {
							addHtmlCard();
						}
					}else if (_getParam(items[0], "value") == 2) {
						unemployed();//无业
					}else if (_getParam(items[0], "value") == 3) {
						student("");//学生
					}else if (_getParam(items[0], "value") == 4 ||_getParam(items[0], "value") == 5) {
						retire();//退休
					}
				});
			}, false);
			//是否有其他工作经历
			var otherPicker = new $.PopPicker();
			otherPicker.setData([{
				value: '1',
				text: '是'
			}, {
				value: '2',
				text: '否'
			}]);
			var showOtherProfession = doc.getElementById('showOtherProfession');
			var otherProfessionResult = doc.getElementById('otherProfessionResult');
			showOtherProfession.addEventListener('tap', function(event) {
				otherPicker.show(function(items) {
					otherProfessionResult.innerText = _getParam(items[0], "text");
					if (_getParam(items[0], "value") == 1) {
						yesJob();//有在职经历
						if(jQuery("#professionCard").find(".mui-card").length==0) {
							addHtmlCard();
						}
					}else if (_getParam(items[0], "value") == 2) {
						unemployed();//没有在职经历
					}
				});
			}, false);
			//教育经历
			var educationPicker = new $.PopPicker();
			educationPicker.setData([{
				value: '1',
				text: '博士'
			}, {
				value: '2',
				text: '研究生'
			}, {
				value: '3',
				text: '本科'
			}, {
				value: '4',
				text: '大专'
			}, {
				value: '5',
				text: '高中'
			}, {
				value: '6',
				text: '初中'
			}, {
				value: '7',
				text: '小学'
			}]);
			var showEducation = doc.getElementById('showEducation');
			var educationResult = doc.getElementById('educationResult');
			showEducation.addEventListener('tap', function(event) {
				educationPicker.show(function(items) {
					educationResult.innerText = _getParam(items[0], "text");
					if (_getParam(items[0], "value") < 5) {
						jQuery("#major").show();
					}else{
						jQuery("#major").hide();
					}
				});
			}, false);
			//三级联动
			var cityPicker3 = new $.PopPicker({
				layer: 3
			});
			cityPicker3.setData(cityData3);
			$(".mui-input-group").on('tap', '.showCityPicker',function(e) {
				var _self = this;
				cityPicker3.show(function(items) {
					var result = _getParam(items[0], 'text') + "-" + _getParam(items[1], 'text') + "-" + _getParam(items[2], 'text');
					jQuery(_self).find(".cityResult").html(result);
					//返回 false 可以阻止选择框的关闭
					//return false;
				});
			}, false);
			//时间选择器
			$(".mui-input-group").on('tap', '.showDatePicker',function(e) {
				var _self = this;
				if(_self.picker) {
					_self.picker.show(function (rs) {
						jQuery(_self).find(".dateResult").html(rs.text);
						_self.picker.dispose();
						_self.picker = null;
					});
				} else {
					var optionsJson = this.getAttribute('data-options') || '{}';
					var options = JSON.parse(optionsJson);
					_self.picker = new $.DtPicker(options);
					_self.picker.show(function(rs) {
						jQuery(_self).find(".dateResult").html(rs.text);
						_self.picker.dispose();
						_self.picker = null;
					});
				}
			}, false);
		})(mui, document);
		var defaultCompany = {
			departureTime: "至今则不填",
			companyProvince: "省",
			companyCity: "市",
			companyArea: "区",
			companyDetailed: "",
			companyName: "",
			updateTime: "",
			companyId: "",
			entryTime: "",
			post: "",
			phone: "",
			createTime: "",
			companyCountry: "中国",
		}
		function addHtmlCard() {
			$("#professionCard").prepend(htmlCard(defaultCompany));
		}
		//在职
		function onJob(){
			$("#school").hide();
			$("#otherProfessionRow").hide();
			$("#otherProfessionResult").html("");
			$("#addProfessionRow").show();
			$("#professionCard").show();
		}
		//无业
		function unemployed(){
			$("#school").hide();
			$("#otherProfessionRow").show();
			$("#addProfessionRow").hide();
			$("#professionCard").hide();
		}
		//有过工作经历
		function yesJob(){
			$("#addProfessionRow").show();
			$("#professionCard").show();
		}
		//学生
		function student(){
			$("#school").show();
			$("#otherProfessionRow").hide();
			$("#otherProfessionResult").html("");
			$("#addProfessionRow").hide();
			$("#professionCard").hide();
		}
		//退休
		function retire(){
			$("#school").hide();
			$("#otherProfessionRow").hide();
			$("#otherProfessionResult").html("");
			$("#addProfessionRow").hide();
			$("#professionCard").hide();
		}
		//添加职业经历
		$("#addCard").on("tap",function(){
			addHtmlCard();
		});
		$("#professionCard").on("input  propertychange","input[name='companyCountry']",function(){
			console.log(this.value);
			if (this.value == "中国") {
				$(this).closest(".mui-card").find(".addrSelect").show();
			} else {
				$(this).closest(".mui-card").find(".addrSelect").hide();
			}
		});
		//删除职业经历
		$("#professionCard").on('tap', '.delCard', function(){
			var _companyId = $(this).closest(".mui-card").find(".companyId-div").text();
			var _self = $(this);
			if (_companyId) {
				base.postData(base.url.delCompanyInfo,{companyId: _companyId},function(data) {
					mui.toast(data.message);
					if (data.success) {
						_self.closest(".mui-card").remove();
						var cardLength = $("#professionCard").find(".mui-card").length;
						$("#professionCard .label-title").each(function(i, e){
							_self.html("职业经历"+cardLength);
							cardLength --;
						});
					}
				});
			} else {
				_self.closest(".mui-card").remove();
				var cardLength = $("#professionCard").find(".mui-card").length;
				$("#professionCard .label-title").each(function(i, e){
					_self.html("职业经历"+cardLength);
					cardLength --;
				});
			}
		});
		$('#schoolCountry').bind('input propertychange', function() {
            if ($(this).val() == "中国") {
            		$("#addrChoose").show();
            } else {
            		$("#addrChoose").hide();
            }
        });
		function htmlCard(item){
			var cardLength = $("#professionCard").find(".mui-card").length + 1;
			var html = '<div class="mui-card" style="padding-bottom: 10px;">'+
						'<div class="companyId-div">'+item.companyId+'</div>'+
						'	<ul class="mui-table-view">'+
						'		<div class="mui-input-row">'+
						'			<label class="label-title">职业经历'+cardLength+'</label>'+
						'		</div>'+
						'		<div class="mui-input-row">'+
						'			<label>单位名称</label>'+
						'			<input type="text" name="companyName" value="'+item.companyName+'" placeholder="请填写单位名称" >'+
						'		</div>'+
						'		<div class="mui-input-row">'+
						'			<label>职位名称</label>'+
						'			<input type="text" name="post" value="'+item.post+'" placeholder="请填写职位名称" >'+
						'		</div>'+
						'		<div class="mui-input-row">'+
						'			<label>单位国家</label>'+
						'			<input type="text" class="countryStr" name="companyCountry" value="'+item.companyCountry+'" placeholder="" >'+
						'		</div>'
						if (item.companyCountry == "中国") {
						html+='	<div class="mui-input-row addrSelect">'+
						'			<label>单位地址</label>'+
						'			<div class="down-select showCityPicker">'+
						'				<label class="cityResult companyAddrCity">'+(item.companyProvince != ''?(item.companyProvince+'-'+item.companyCity+'-'+item.companyArea):'省市区')+'</label>'+
						'				<img src="../img/detail/down_color_icon.png" />'+
						'			</div>'+
						'		</div>'
						}
						html+='	<div class="mui-input-row">'+
						'			<label></label>'+
						'			<input type="text" name="companyDetailed" value="'+item.companyDetailed+'" placeholder="详细地址（精确到门牌号）" value="" >'+
						'		</div>'+
						'		<div class="mui-input-row">'+
						'			<label>单位电话</label>'+
						'			<input type="text" name="phone" value="'+item.phone+'" placeholder="请填写单位电话" value="" >'+
						'		</div>'+
						'		<div class="mui-input-row">'+
						'			<label>入职时间</label>'+
						'			<div data-options=\'{"type":"date","beginYear":1900}\' class="down-select showDatePicker">'+
						'				<label class="dateResult entryTime">'+item.entryTime+'</label>'+
						'				<img src="../img/detail/down_color_icon.png" />'+
						'			</div>'+
						'		</div>'+
						'		<div class="mui-input-row">'+
						'			<label>离职时间</label>'+
						'			<div data-options=\'{"type":"date","beginYear":1900}\' class="down-select showDatePicker">'+
						'				<label class="dateResult departureTime">'+item.departureTime+'</label>'+
						'				<img src="../img/detail/down_color_icon.png" />'+
						'			</div>'+
						'		</div>'
						if (cardLength > 1) {
						html+=	'<div style="padding:0 10px" class="mui-input-row">'+
						'			<button type="button" style="margin-top:6px;width:100%;" class="mui-btn mui-btn-danger mui-btn-block mui-btn-outlined delCard">删&nbsp;&nbsp;除</button>'+
						'		</div>'
						}
						html+='	</ul>'+
						'</div>';
			return html;			
		}
		var _getParam = function(obj, param) {
			return obj[param] || '';
		};
		function getCompanyListListData() {
			base.setWait('正在获取数据');
			let url = base.url.getCompanyList;
			var params = {
				customerId: customerId,
				applyCustomerId: applyCustomerId
			}
			base.postData(url, params, getCompanyListSuccess)
		}
		function getCompanyListSuccess(data) {
			if (data.success) {
				companyOtherId = data.extendData.companyOtherId;
				var _professionType = data.extendData.professionType;
				$("#income").val(data.extendData.income);
				$("#prodessionResult").text(getProfessionStr(data.extendData.professionType));
				if (_professionType == 1 || _professionType == 2) {
					for(var index in data.extendData.companyList) {
						$("#professionCard").prepend(htmlCard(data.extendData.companyList[index]));
					}
					if (_professionType == 1) {
						onJob();//在职
					} else {
						$("#otherProfessionResult").html(getWhetherStr(data.extendData.isOtherWork));
						if (data.extendData.isOtherWork == 1) {
							$("#otherProfessionRow").show();
							$("#addProfessionRow").show();
							$("#professionCard").show();
						} else {
							unemployed();//无业
						}
					}
				} else if (_professionType == 3) {
					$("#educationResult").text(getEducationStr(data.extendData.educationType));//
					$("#schoolName").val(data.extendData.schoolName);
					$("#professional").val(data.extendData.professionalName);
					$("#schoolCountry").val(data.extendData.schoolCountry);
					if (data.extendData.schoolCountry == "中国") {//如果是中国就显示省市区，反之则不显示，直接显示详细地址
						$("#addrChoose").show();
						$("#schoolAddr").text(data.extendData.schoolProvince+"-"+data.extendData.schoolCity+"-"+data.extendData.schoolArea);//省市区
					}
					$("#schoolDetailed").val(data.extendData.schoolDetailed);
					$("#educationStartTime").text(data.extendData.educationStartTime);
					student();//学生
				} else if (_professionType == 4 ||_professionType == 5) {
					retire();//退休
				}
			} else {
				mui.toast(data.message);
			}
		}
		$(".transaction-container").on("tap", "button", function() {
			var url = base.url.addCompanyInfo;
			var companyList = new Array();
			$("#professionCard").find(".mui-card").each(function(index, item){
				var _companyAddrCity = '';
				if ($(this).find(".companyAddrCity").text().indexOf("-")!=-1) {
					_companyAddrCity = $(this).find(".companyAddrCity").text().split("-");
				}
				var _departureTime = $(this).find(".departureTime").text();
				var itemParams = {
					companyId:$(this).find(".companyId-div").text(),
					companyName:$(this).find("input[name='companyName']").val(),
					phone:$(this).find("input[name='phone']").val(),
					companyCountry:$(this).find("input[name='companyCountry']").val(),
					companyProvince:_companyAddrCity!=''?_companyAddrCity[0]:_companyAddrCity,
					companyCity:_companyAddrCity!=''?_companyAddrCity[1]:_companyAddrCity,
					companyArea:_companyAddrCity!=''?_companyAddrCity[2]:_companyAddrCity,
					companyDetailed:$(this).find("input[name='companyDetailed']").val(),
					post:$(this).find("input[name='post']").val(),
					entryTime:$(this).find(".entryTime").text(),
					departureTime: _departureTime != '至今则不填'?_departureTime:''
				}
				companyList.push(itemParams);
			});
			companyList = JSON.stringify(companyList);
			var _schoolAddr = '';
			if ($("#schoolAddr").text().indexOf("-")!=-1) {
				_schoolAddr = $("#schoolAddr").text().split("-");
			}
			var params = {
				customerId: customerId,
				applyCustomerId: applyCustomerId,
				professionType: getProfessionValue($("#prodessionResult").text()),
				isOtherWork: getWhetherValue($("#otherProfessionResult").text()),
				income: $("#income").val(),
				companyOtherId: companyOtherId,
//				educationEndTime: $("#educationEndTime").val(), 毕业时间
				educationStartTime: $("#educationStartTime").text(),
				professionalName: $("#professional").val(),
				schoolCountry: $("#schoolCountry").val(),
				schoolName: $("#schoolName").val(),
				educationType: getEducationValue($("#educationResult").text()),
				schoolProvince: _schoolAddr!=''?_schoolAddr[0]:_schoolAddr,
				schoolCity: _schoolAddr!=''?_schoolAddr[1]:_schoolAddr,
				schoolArea: _schoolAddr!=''?_schoolAddr[2]:_schoolAddr,
				schoolDetailed: $("#schoolDetailed").val(),
				companyParameter: (getWhetherValue($("#otherProfessionResult").text())==1||getProfessionValue($("#prodessionResult").text())==1)?companyList:""
			};
			console.log(params);
			base.postData(url,params,addCompanyInfoSuccess);
		})
		function addCompanyInfoSuccess(data) {
			mui.toast(data.message);
			if (data.success) {
				setTimeout(function() {
					mui.back();
				}, 1000);
			}
		}
	</script>
</body>
</html>
